<template>
  <div class="space-y-4">
    <div v-for="item in filteredItems" :key="item.id" class="bg-gray-50 rounded-xl p-4 hover:bg-gray-100 transition-colors cursor-pointer" @click="handleOpen(item)">
      <!-- 角色信息头部 -->
      <div class="flex items-start gap-3">
        <!-- 角色头像 -->
        <div v-if="item.image" class="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
          <img 
            :src="item.image" 
            :alt="item.title"
            class="w-full h-full object-cover"
            @error="handleImageError"
          />
        </div>
        <!-- 默认头像 -->
        <div v-else class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
          <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
          </svg>
        </div>
        
        <!-- 角色信息 -->
        <div class="flex-1 min-w-0">
          <div class="text-gray-900 font-medium">{{ item.title }}</div>
          <p class="mt-1 text-sm text-gray-500 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;">{{ item.summary }}</p>
          <div class="mt-2 text-xs text-gray-400">
            来源对话: {{ item.source }}
          </div>
        </div>
        
        <!-- 取消收藏按钮 -->
        <div class="flex-shrink-0">
          <button 
            @click.stop="handleRemove(item)"
            class="text-amber-500 hover:text-amber-600 transition-colors"
            title="取消收藏"
          >
            ★
          </button>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredItems.length === 0" class="text-center py-12 text-gray-500">
      <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
      </svg>
      <p>暂无收藏内容</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface FavoriteItem {
  id: number
  title: string
  summary: string
  source: string
  image?: string
}

const props = defineProps<{
  items: FavoriteItem[]
  searchKeyword?: string
}>()

const emit = defineEmits<{
  'remove': [item: FavoriteItem]
  'open': [item: FavoriteItem]
}>()

// 过滤后的数据
const filteredItems = computed(() => {
  if (!props.searchKeyword) return props.items
  
  return props.items.filter(item => 
    item.title.toLowerCase().includes(props.searchKeyword!.toLowerCase()) ||
    item.summary.toLowerCase().includes(props.searchKeyword!.toLowerCase()) ||
    item.source.toLowerCase().includes(props.searchKeyword!.toLowerCase())
  )
})

const handleRemove = (item: FavoriteItem) => {
  emit('remove', item)
}

const handleOpen = (item: FavoriteItem) => {
  emit('open', item)
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.style.display = 'none'
}
</script>
